<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>基础组件-动态缓存管理</title>
	<link rel="stylesheet" type="text/css" href="js/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/icon.css">
	<link rel="stylesheet" type="text/css" href="js/demo.css">
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#tt').datagrid({
				url: 'list.json',
				title: 'osmp cache manager list',
				fitColumns: true,
				columns:[[
					{field:'id',title:'id',width:120},
					{field:'name',title:'缓存名称',width:150},
					{field:'method',title:'方法名称',width:200},
					{field:'timeToLive',title:'有效时间(秒)',width:50},
					{field:'timeToIdle',title:'空闲时间(秒)',width:50},
					{field:'state',title:'状态',width:50,formatter : function(value, rec, index){
							if (value == 1) {
								return '开启'
							}else{
								return '关闭'
							}
						}
					},
					{field : 'opt',title : '操作',width:200,formatter : function(value, rec, index) {
						if (!rec.id) {
							return '';
						}
						var href = '';
						href += "[<a href='#' onclick=edit('"+rec.id+"')>修改</a>]";
						return href;
					}
				}
				]],
				onHeaderContextMenu: function(e, field){
					e.preventDefault();
					if (!$('#tmenu').length){
						createColumnMenu();
					}
					$('#tmenu').menu('show', {
						left:e.pageX,
						top:e.pageY
					});
				}
			});
		});
		
		function createColumnMenu(){
			var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
			var fields = $('#tt').datagrid('getColumnFields');
			for(var i=0; i<fields.length; i++){
				$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
			}
			tmenu.menu({
				onClick: function(item){
					if (item.iconCls=='icon-ok'){
						$('#tt').datagrid('hideColumn', item.text);
						tmenu.menu('setIcon', {
							target: item.target,
							iconCls: 'icon-empty'
						});
					} else {
						$('#tt').datagrid('showColumn', item.text);
						tmenu.menu('setIcon', {
							target: item.target,
							iconCls: 'icon-ok'
						});
					}
				}
			});
		}
		
		
		function edit(id){
			$('<div/>').dialog({
					href : 'edit.html?id='+id,
					width : 400,
					height : 250,
					modal : true,
					title : '编辑',
					buttons:[{
						text : '提交编辑',
						iconCls : 'icon-edit',
						handler : function() {
							var d = $(this).closest('.window-body');
							$('#editForm').form('submit', {
								url :'update.json',
								success : function(result) {
									$.messager.alert('提示', result);
									reloadGrid('tt','datagrid');
									d.dialog('destroy');
								}
							});
						}
					}],
					onClose:function(){
						$(this).closest('.window-body').dialog('destroy');
					}
				});
		}
		function reloadGrid(){
			$('#tt').datagrid('reload');
		}
	</script>
</head>
<body>
	<h2>缓存动态管理列表</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>这里你可以动态的修改缓存配置策略，开启，关闭单独方法的缓存，设置缓存的存活时间等</div>
	</div>
	
	<table id="tt"></table>
	
</body>
</html>